<template>
  <view class="containter">
    <view class="dayun-year-box">
      <view class="dayun-item">
        <view class="dayun-year"></view>
      </view>
      <template v-for="(item,index) in liuyueData">
        <view class="dayun-item" :key="index">
          <view class="dayun-year">{{item.jieName}}</view>
        </view>
      </template>
    </view>
    <view class="dayun-box">
      <view class="none-data" v-if="loading">
        <uni-load-more class="none-loading" color="#fff" status="loading" />
      </view>
      <view class="dayun-item">
        <view class="dayun-info-title">流月</view>
      </view>
      <template v-for="(item,index) in liuyueData">
        <view class="dayun-item" :key="index" @click="liuyueClick(item, index)">
          <view class="dayun-info" :class="[liuyueIndex == index ? 'dayun-select' : '',]">
            <view class="dayun-ele">
              {{item.ganZhi[0]}}
            </view>
            <view class="dayun-ele">
              {{item.ganZhi[1]}}
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
  import {
    getBaziLiuYueApi
  } from "@/http/api"
  import wuxingColor from '@/utils/wuxing.js'
  import {
    EventBus
  } from '@/main.js'
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        loading: true,
        jieqi: ["立春", "惊蛰", "清明", "立夏", "芒种", "小暑", "立秋", "白露", "寒露", "立冬", "大雪", "小寒"],
        baziResult: this.result,
        liunianData: [],
        liuyueData: [],
        liuyueIndex: undefined
      }
    },
    mounted() {
      EventBus.$on('liunian', param => {
        this.liuyueIndex = 0;
        this.liunianData = JSON.parse(JSON.stringify(param.liunianData));
        this.getLiuyueData(param.liunianData.year);
      })
    },
    beforeDestroy() {
      EventBus.$off("liunian")
    },
    methods: {
      getLiuyueData(year) {
        this.loading = true;
        getBaziLiuYueApi({
          userName: this.baziResult.userName,
          birthDay: this.baziResult.birthDay,
          districtGeocode: this.baziResult.districtGeocode,
          sex: this.baziResult.sex,
          solar: (this.baziResult.trueSolarTime && this.baziResult.trueSolarTime != "") ? true : false,
          yearMonth: year,
          type: 'jiulong'
        }).then(res => {
          if (res.code == 200) {
            this.liuyueData = res.data;
            this.loading = false;
            // 传值给流日
            let data = this.liuyueData[0];
            this.$emit('change', data);
            EventBus.$emit('liuyue', {
              liuyueData: data,
              year: this.liunianData.year,
            })
          }
        })
      },
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color
        } = wuxingColor.getJiuLongGanzhiWuxingColorInfo(str);
        return `color: ${color}`
      },
      liuyueClick(data, index) {
        if (this.liuyueIndex == index) return
        this.liuyueIndex = index;
        this.$emit('change', data);
        EventBus.$emit('liuyue', {
          liuyueData: data,
          year: this.liunianData.year,
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .containter {
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    background-color: #eeeeee;
  }

  .dayun-year-box {
    background-color: #cccccc;
  }

  .dayun-box,
  .dayun-year-box {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    position: relative;
    .none-data {
      position: absolute;
      width: 100%;
      height: 100%;
      .none-loading {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
    .dayun-item {
      display: flex;
      flex: 1 0;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      box-sizing: border-box;

      .dayun-year {
        width: 100%;
        font-size: 20rpx;
        text-align: center;
      }

      .dayun-info-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
      }

      .dayun-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 14rpx;
        box-sizing: border-box;

        .dayun-ele {
          display: flex;
          flex-direction: row;
          line-height: 32rpx;

          .dayun-ganzhi {
            font-size: 40rpx;
            padding-right: 4rpx;
          }

          .dayun-shishen {
            font-size: 20rpx;
            color: #4B240D;
          }
        }
      }
    }
  }

  .dayun-select {
    background-color: #999999;
  }
</style>